<template>
  <view :class="ns.b()">
    <i-biz-icon
      v-if="rawItemType === 'IMAGE'"
      :class="ns.e('image')"
      :icon="rawItemContent"
    />
    <text
      v-if="rawItemType === 'TEXT' || rawItemType === 'RAW'"
      :class="ns.e('text')"
    >
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING1'" :class="ns.e('h1')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING2'" :class="ns.e('h2')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING3'" :class="ns.e('h3')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING4'" :class="ns.e('h4')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING5'" :class="ns.e('h5')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING6'" :class="ns.e('h6')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'PARAGRAPH'" :class="ns.e('paragraph')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HTML'" :class="ns.e('paragraph')">
      {{ rawItemText }}
    </text>
    <video v-if="rawItemType === 'VIDEO'" :class="ns.e('video')">视频</video>
    <view v-if="rawItemType === 'DIVIDER'" :class="ns.e('divider')"
      >分割线</view
    >
    <view
      v-if="
        rawItemType === 'INFO' ||
        rawItemType === 'WARNING' ||
        rawItemType === 'ERROR'
      "
    >
      提示消息
    </view>
    <view v-if="rawItemType === 'MARKDOWN'">MARKDOWN</view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { PropType, Ref, ref, watch } from "vue";
import { createUUID } from "qx-util";
import {
  IHtmlItem,
  IPanelRawItem,
  IRawItemBase,
  ISysImage,
  ITextItem,
} from "@ibiz/model-core";
import { showTitle } from "@ibiz-template/core";
import { useNamespace } from "@/use";
import { rawItemProps } from './i-biz-raw-item'
// import { parseHtml } from '@/utils'

const props = defineProps(rawItemProps);

const ns = useNamespace("rawitem");
let tempRawItem: IRawItemBase | null = null;
let contentType = "";
if (props.rawItem) {
  tempRawItem = props.rawItem.rawItem!;
  contentType = tempRawItem.contentType!;
}
const rawItemType = ref(props.type || contentType || "");
const rawItemContent: Ref<string | number | IData> = ref("");
let sysImage: ISysImage | undefined;
if (contentType === "IMAGE") {
  sysImage = (tempRawItem as IPanelRawItem).sysImage;
}
// 传入内容
if (contentType === "RAW" || contentType === "HTML") {
  if (contentType === "RAW") {
    rawItemType.value = "TEXT";
    rawItemContent.value = (tempRawItem as ITextItem).caption!;
  } else {
    rawItemContent.value = (tempRawItem as IHtmlItem).content!;
  }
} else if (
  ["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(contentType!)
) {
  // 暂不支持
  // content = rawContent;
} else if (contentType === "IMAGE" && sysImage) {
  rawItemContent.value = sysImage;
}

// 判断传入是否为图片路径
const isImg = (imgUrl: string) => {
  const reg =
    /^https?:|^http?:|(\.png|\.svg|\.jpg|\.png|\.gif|\.psd|\.tif|\.bmp|\.jpeg)/;
  return reg.test(imgUrl);
};

// 判断传入是否为html字符
const isHtmlStr = (str: string) => {
  try {
    const fragment = new DOMParser().parseFromString(str, "text/html");
    return fragment.body.children.length > 0;
  } catch (error) {
    return false;
  }
};

// 视频类型内容参数
const playerParams = ref({
  id: createUUID(),
  path: "",
  mute: true,
  autoplay: true,
  replay: false,
  showcontrols: true,
});

// 分割线类型参数
const dividerParams = ref({
  contentPosition: "center",
  html: "",
});

// 类型参数
const alertParams = ref({
  type: "info",
  title: "",
  closeabled: true,
  showIcon: false,
});

// 文本类型显示值
const rawItemText: Ref<string | number | IData> = ref("");

// 转换各类值操作
const convertValue = () => {
  // 图片类型
  if (rawItemType.value === "IMAGE") {
    if (props.content && typeof props.content === "string") {
      if (isImg(props.content)) {
        rawItemContent.value = { imagePath: props.content };
      } else {
        rawItemContent.value = { cssClass: props.content };
      }
    } else if (sysImage) {
      rawItemContent.value = sysImage;
    }
  }

  // 文本类型
  if (
    [
      "TEXT",
      "HEADING1",
      "HEADING2",
      "HEADING3",
      "HEADING4",
      "HEADING5",
      "HEADING6",
      "PARAGRAPH",
      "HTML",
      "RAW",
    ].includes(rawItemType.value)
  ) {
    rawItemText.value = rawItemContent.value;
    if (typeof rawItemText.value === "string") {
      const val = rawItemText.value;
      rawItemText.value = val
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;nbsp;/g, " ")
        .replace(/&nbsp;/g, " ");
    }
  }

  // 适配html类型但并非html字符串换行符识别异常
  if (rawItemType.value === "HTML" && !isHtmlStr(rawItemText.value as string)) {
    rawItemText.value = (rawItemText.value as string).replace(/\n/g, "<br>");
  }
  // TODO 解析表情内容
  // if (rawItemType.value === 'HTML') {
  //   rawItemText.value = parseHtml(rawItemText.value as string)
  // }

  if (
    ["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(rawItemType.value)
  ) {
    if (rawItemContent.value) {
      let rawConfig = {};
      try {
        if (typeof rawItemContent.value === "string") {
          // eslint-disable-next-line no-new-func
          const func = new Function(`return (${rawItemContent.value});`);
          rawConfig = func();
          switch (rawItemType.value) {
            case "VIDEO":
              Object.assign(playerParams.value, rawConfig);
              break;
            case "DIVIDER":
              Object.assign(dividerParams.value, rawConfig);
              break;
            case "INFO":
            case "WARNING":
            case "ERROR":
              alertParams.value.type = rawItemType.value.toLocaleLowerCase();
              Object.assign(alertParams.value, rawConfig);
              break;
            default:
              break;
          }
        }
      } catch {
        ibiz.log.error(
          ibiz.i18n.t("component.rawItem.errorConfig", {
            type: rawItemType.value,
          })
        );
      }
    }
  }
};

convertValue();

watch(
  () => props.content,
  (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
      rawItemContent.value = newVal as string | number;
      convertValue();
    }
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss">
@include b(rawitem) {
  width: 100%;
  height: 100%;
  font-size: getCssVar(font-size, regular);
  color: getCssVar(editor, default, text-color);

  @include b(icon) {
    width: 100%;
    height: 100%;
  }
}
</style>
